<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>8-卡片模块hot案例</title>
		<style type="text/css">
			/* 准备 */
			*{
				margin:0;
				padding: 0;
			}
			a{
				text-decoration: none;
			}
			body{
				line-height:1;
				background:#f4f5f9;
			}
			.box img{
				height:152px;
				width:100%;
				display: block;
			}
			.box h3{
				color:#000000;
				font-size:12px;
				margin-top:33px;
				text-align: center;
			}
			.box p{
				margin-top:20px;
				text-align: center;
			}
			.box span:nth-child(1){
				font-size:11px;
				color:#f77321;
			}
			.box span:nth-child(2){
				font-size:11px;
				color:#929292;
			}
			/* 子绝父相 */
			.box{
				width: 228px;
				height: 270px;
				background:#ffffff;
				margin:30px auto;
				position: relative;
			}
			.box img:nth-child(1){
				width: 40px;
				height:24px;
				position: absolute;
				top: 4px;
				right: -4px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="images/hot.png" alt="">
			<img src="images/product.png" alt="">
			<h3>Android网络图片加载框架详解</h3>
			<p><span>高级</span><span> • 1125人在学习</span></p>
		</div>
	</body>
</html>
